<template>
	<el-main class="nopadding" style="overflow: hidden;margin: 15px 0px;">
		<el-row :gutter="15">
			<el-col :lg="24">
				<el-card shadow="never" style="margin: 0px; padding: 0px">
					<jdEcharts height="300px" :option="echarts.option"></jdEcharts>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import jdEcharts from '@/components/jdEcharts';

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		title: "应用数据",
		icon: "el-icon-data-line",
		description: "",
		components: {
			jdEcharts
		},
		props:{
			data:Object
		},
		data() {
			return {
				echarts:{
					option: {
						title: {
							text: '应用数据',
							subtext: '近15天数据汇总',
						},
						grid: {
							top: '80px'
						},
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
							type: 'category',
							axisLabel: {
								interval:0,
								rotate:25
							},
							data: ['4月23日','4月24日','4月25日','4月26日','4月27日','4月28日','4月29日','4月30日','5月1日', '5月2日', '5月3日', '5月4日', '5月5日', '5月6日', '5月7日']
						},
						yAxis: {
							type: 'value'
						},
						series: [
							{
								data: [0, 200, 150, 80, 70, 0, 130, 5, 200, 150, 1, 70, 110, 130, 150],
								type: 'bar',
								barWidth: '18px',
							}
						]
					},
				}
			}
		},
		watch:{
		   data(){
			  if (this.data.appData.length >0){
				  let date =[];
				  let data =[];
				  for (let i = 0; i < this.data.appData.length; i++) {
					  date.push(this.data.appData[i].key)
					  data.push(this.data.appData[i].value)
				  }
				  this.echarts.option.xAxis.data=date;
				  this.echarts.option.series[0].data=data;
			  }else {
				  this.echarts.option.xAxis.data=['4月23日','4月24日','4月25日','4月26日','4月27日','4月28日','4月29日','4月30日','5月1日', '5月2日', '5月3日', '5月4日', '5月5日', '5月6日', '5月7日'];
				  this.echarts.option.series[0].data=[0, 200, 150, 80, 70, 0, 130, 5, 200, 150, 1, 70, 110, 130, 150];
			  }
		   }
		},
		mounted() {

		},
		beforeUnmount() {

		}
	}
</script>

<style lang="scss">

</style>
